<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<link rel="stylesheet" type="text/css" href="css/jquery.idcode.css"/>
		<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/jquery.idcode.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="header">
			<a href="javascript:;;">
				<img src="img/register/logo.png">
				<span>欢迎登录</span>
			</a>
		</div>
		<div class="login_main clear">
			<div class="pic">
				<a href="javascript:;;">
					<img src="img/login/login_ad.png"/>
				</a>
			</div>
			<div class="login">
				<div class="login_header">
					<span>登录</span>
					<a href="register.html">免费注册</a>
				</div>
				<div class="login_box clear">
					<!-- 登录导航 -->
					<ul class="loginnav">
						<li class="edLoginLi1 current"><em></em>优选账号</li>
						<li class="edLoginLi2"><em></em>速运账号</li>
					</ul>
					
					<!-- 登录模块主体 -->
					<div class="logincon">
						<ul class="phone_ul">
							<form id="m1">
								<li class="loginErrorBox">
									<div class="loginError">
										<span class="errorIcon"></span>
										<span class="errorTips">提示</span>
									</div>
								</li>
								<li class="loginUname">
									<div class="unameIcon">
										<span class="icon"></span>
									</div>
									<div class="unameipt">
										<input type="text" id="uname" name="uname" placeholder="请输入手机号/邮箱/用户名"/>
										<em></em>
									</div>
								</li>
								<li class="padPhone">
									<div class="unameIcon">
										<span class="icon"></span>
									</div>
									<div class="unameipt">
										<input type="text" id="upsw" name="upsw" placeholder="请输入密码"/>
									</div>
								</li>
								<li class="loginVcode">
									<div class="unameIcon">
										<span class="icon"></span>
									</div>
									<div class="unameipt">
										<input type="text" class="txtVerification" id ="Txtidcode" name="uchk" placeholder="请输入验证码"/>
										<span id="idcode"></span>
									</div>
								</li>
								<li class="btn_sub">
									<button>登录</button>
								</li>
								<li class="phon_w1">
									<a href="javascript:;;" class="phone_words">手机验证登录 ></a>
									<a href="javascript:;;" class="forget">忘记密码?</a>
								</li>
							</form>
						</ul>
						<ul class="phone_ul" style="display: none;">
							<form id="m3">
								<li class="loginErrorBox">
									<div class="loginError">
										<span class="errorIcon"></span>
										<span class="errorTips">提示</span>
									</div>
								</li>
								<li class="loginUname">
									<div class="unameIcon">
										<span class="icon"></span>
									</div>
									<div class="unameipt">
										<input type="text" id="uname" name="uname" placeholder="请输入手机号/邮箱/用户名"/>
										<em></em>
									</div>
								</li>
								<li class="padPhone">
									<div class="unameIcon">
										<span class="icon"></span>
									</div>
									<div class="unameipt">
										<input type="text" id="upsw" name="upsw" placeholder="请输入密码"/>
									</div>
								</li>
								<li class="loginVcode">
									<div class="unameIcon">
										<span class="icon"></span>
									</div>
									<div class="unameipt">
										<input type="text" class="txtVerification" id ="Txtidcode" name="loginCode" placeholder="请输入验证码"/>
										<span id="idcode"></span>
									</div>
								</li>
								<li class="btn_sub">
									<button>登录</button>
								</li>
								<li class="phon_w1">
									<span>
										登录即视为同意
										<a href="javascript:;;" class="phone_words"> 《联合登录授权协议》</a>
									</span>
								</li>
							</form>
						</ul>
					</div>
					
					<!-- 登录账号推荐 -->
					<ul class="blink">
						<li class="li1">
							<span class="s1"><i class="bg icon1"></i></span>
							<a href="javascript:;;">QQ</a>
						</li>
						<li class="li2">
							<span><i class="bg icon2"></i></span><a href="javascript:;;">新浪微博</a>
						</li>
						<li class="li3">
							<span><i class="bg icon3"></i></span><a href="javascript:;;">支付宝</a>
						</li>
						<li class="li4">
							<span><i class="bg icon4"></i></span><a href="javascript:;;">微信</a>
						</li>
					</ul>
				</div>
				
			</div>
		</div>
		<div class="footer"></div>
		<script type="text/javascript">
			
			$(() => {
				
				$(".footer").load("./reg_footer.html")
				$.idcode.setCode();//加载生成验证码方法
				$("form").on("submit",function(){
					var IsBy = $.idcode.validateCode()  //调用返回值，返回值结果为true或者false
					if(IsBy){
						$.ajax({
							url:"http://127.0.0.1:8080/api/login",
							data:$("form:eq(0)").serialize(),
							type:"post",
							dataType:"json",
							// headers:{
							// 	"Content-Type":"x-www-form-urlencoded"
							// 	"X-Requested-With":"XMLHttpRequest"
							// }
						}).then((data) => {
							console.log(data);
							$.cookie("userinfo",JSON.stringify(data.data),{
								expires:10
							})
						})
					}else{
						alert("验证码错误")
					}
					
					return false;
				})
			})
		</script>
	</body>
</html>
